<template>
	<canvas canvas-id="canvas-drag" disable-scroll="true" @touchstart="touchstart" @touchmove="touchmove"
		@touchend="touchend" :style="'width: ' + width + '; height: ' + height + ';'"></canvas>
</template>

<script>
	// import dragGraph, {
	// 	defaultX,
	// 	defaultY
	// } from "./drawGraph.js";

	export default {
		data() {
			return {
				ctx: null,
				title: 'Hello',
				imgurl: "/static/demo.jpg",
				moveCenter: {},
				//是否在缩放
				isScale: false,
				pointArgs: [],
				patharrs: [],
				canvasInfo: {
					offsetEvtPos: {
						x: null,
						y: null
					}, //偏移事件位置
					offset: {
						x: 0,
						y: 0
					}, //缩放偏移
					scale: 1, //缩放比例
					scaleStep: 0.03, //每次缩放产生的变化量
					maxScale: 3, //最大缩放倍数
					minScale: 0.1, //最小缩放倍数
					delaY: 0,
					delax: 0,
				},
				touchCount: 0,
				lastDistance: 0,
				index: 0,
				px: 20,
				py: 20,
			};
		},

		props: {
			graph: {
				type: Object,
				default: () => ({})
			},
			width: {
				type: String,
				default: '750rpx'
			},
			height: {
				type: String,
				default: '750rpx'
			}
		},

		watch: {
			graph: {
				handler: 'onGraphChange',
				deep: true
			}
		},

		mounted() {
			const sysInfo = wx.getSystemInfoSync();
			this.ctx = wx.createCanvasContext('canvas-drag', this);
			if (JSON.stringify(this.graph) !== '{}') {
				this.onGraphChange(this.graph, null);
			};
		},

		methods: {
			/**
			 * @param {Object} new
			 * @param {Object} old
			 */
			onGraphChange(n, o) {
				this.draw();
			},
			draw() {
				// this.ctx.translate(this.canvasInfo.offset.x, this.canvasInfo.offset.y);
				// this.ctx.scale(this.canvasInfo.scale, this.canvasInfo.scale);
				// this.ctx.drawImage(this.imgurl, 0, 0);
				// this.ctx.save();
				this.ctx.clearRect(-10000, -1000, 10000, 10000)
				this.ctx.save();
				this.ctx.fillStyle = "red";
				this.ctx.translate(this.canvasInfo.offset.x, this.canvasInfo.offset.y);
				let ltx = this.px * this.canvasInfo.scale;
				let lty = this.py * this.canvasInfo.scale;
				let rbx = ltx + 50;
				let rby = lty + 30;
				console.log("----->", ltx, lty, rbx, rby);
				this.ctx.fillRect(ltx, lty, rbx, rby);
				return new Promise(resolve => {
					this.ctx.draw(false, () => {
						resolve();
					});
				});
			},

			touchstart(e) {
				const length = e.touches.length;
				console.log("count start", length);
				this.canvasInfo.offsetEvtPos = {
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				};
				this.draw();
			},

			touchmove(e) {
				const length = e.touches.length;
				// console.log("count m", length);
				try {
					let count = e.touches.length;
					if (count == 2) {
						if (!this.isScale) {
							this.getCenterPoint(e.touches[0], e.touches[1]);
						}
						this.isScale = true;
						this.scaleCanvas(e.touches[0], e.touches[1]);
					} else {
						this.moveCenter = {}
						if (this.isScale) {
							let objs = {
								x: e.touches[0].x,
								y: e.touches[0].y
							}
							this.move(e.touches[0]);
						}
						this.isScale = false;
						this.move(e.touches[0]);
					}
					// if (count == 2) {

					// 	this.isScale = true

					// } else {
					// 	this.isScale = false;

					// }
				} catch (err) {
					console.log(err);
				}
			},

			touchend(e) {
				const length = e.touches.length;
				// console.log("count end", length);
			},
			//获取最初的中心点
			getCenterPoint(p1, p2) {
				this.pointArgs = [];
				let x1 = p1.x;
				let y1 = p1.y;
				let x2 = p2.x;
				let y2 = p2.y;
				let newCenterPoint = {
					x: x2 > x1 ? x1 + (x2 - x1) / 2 : x2 + (x1 - x2) / 2,
					y: y2 > y1 ? y1 + (y2 - y1) / 2 : y2 + (y1 - y2) / 2
				};
				this.lastDistance = this.getDistance(p1, p2)
				this.delax = (newCenterPoint.x - this.canvasInfo.offset.x) * 0.03 / this.canvasInfo.scale
				this.delaY = (newCenterPoint.y - this.canvasInfo.offset.y) * 0.03 / this.canvasInfo.scale
				this.moveCenter = newCenterPoint
			},
			getDistance(p1, p2) {
				return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
			},
			scaleCanvas(ps, pe) {
				// if (this.index >= 10) {
				// 	return;
				// }
				let x1 = ps.x;
				let y1 = ps.y;
				let x2 = pe.x;
				let y2 = pe.y;
				let p1 = {
					x: x1,
					y: y1
				}
				let p2 = {
					x: x2,
					y: y2
				}
				this.index++;
				let distance = this.getDistance(p1, p2)
				// console.log("last d::", this.lastDistance, " now D:::,", distance);
				if (this.lastDistance == 0 || this.lastDistance == distance) {
					this.lastDistance = distance;
				} else {
					let isAddScall = this.lastDistance > distance ? -1 : 1;
					let scale = this.canvasInfo.scale;
					if (this.lastDistance > distance && scale - 0.03 > 0.1) { //缩小

						this.canvasInfo.offset.x = this.canvasInfo.offset.x + this.delax;
						this.canvasInfo.offset.y = this.canvasInfo.offset.y + this.delaY;
						this.canvasInfo.scale = scale - 0.03;
					} else if (this.lastDistance < distance && scale + 0.03 < 3) {
						this.canvasInfo.offset.x = this.canvasInfo.offset.x - this.delax;
						this.canvasInfo.offset.y = this.canvasInfo.offset.y - this.delaY;
						this.canvasInfo.scale = scale + 0.03;
					}
					this.lastDistance = distance;
				}
				this.draw();
			},
			/**
			 * @param {Object} offset 缩放前偏移
			 * @param {Object} loc 缩放中心坐标 x或者y
			 * @param {Object} scale 缩放前 缩放
			 * @param {Object} isAddScale 是否缩放  1 \-1
			 */
			getOffSetByScale(offset, loc, scale, isAddScale) {
				let res = isAddScale * ((loc - offset) * 0.03 * 2) / scale + (offset);
				// console.log("offset:", offset, "loc", loc, "scale:::", scale, " isadd::", isAddScale, "res :::", res);
				return res;
			},
			move(p) {
				let objs = {
					x: p.x,
					y: p.y
				};
				this.canvasInfo.offset.x += (objs.x - this.canvasInfo.offsetEvtPos.x);
				this.canvasInfo.offset.y += (objs.y - this.canvasInfo.offsetEvtPos.y);
				this.draw();
				this.canvasInfo.offsetEvtPos = objs;
			},
		}
	};
</script>
<style>
	/* @import "./index.css"; */
</style>
